<!--超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
不是一种编程语言，而是一种标记语言
使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

HTML 标签/HTML 元素:  <标签>内容</标签>  推荐使用小写

-->
<!DOCTYPE html>                <!--声明为 HTML5 文档 doctype 声明是不区分大小写的，以下方式均可： <!DOCTYPE html>  <!DOCTYPE HTML>  <!doctype html>   <!Doctype Html> -->
<html lang="en">              <!--HTML 页面的根元素-->
<head>                         <!--包含了文档的元（meta）数据-->
    <meta charset="UTF-8">                             <!--meta标签描述了一些基本的元数据.中文编码，字符集-->
    <meta name="description" content="免费在线教程"> <!--描述-->
    <meta name="keywords" content="HTML,CSS,XML,JavaScript"><!--关键词-->
    <meta name="author" content="runoob">   <!--作者-->
    <meta http-equiv="refresh" content="30">  <!--每30秒钟刷新当前页面-->
    <title>Title</title>      <!--title元素描述了文档的标题,显示在搜索引擎结果页面的标题,定义了浏览器工具栏的标题,当网页添加到收藏夹时，显示在收藏夹中的标题-->
    <!--  内部样式表在HTML文档头部head 区域使用style元素 来包含CSS
    当单个文件需要特别样式时，就可以使用内部样式表。-->
    <style type="text/css">
        body {background-color:yellow}
        p {color:blue}
    </style>
    <script></script>
    <noscript></noscript>
    <link rel="stylesheet" type="text/css" href="mystyle.css">  <!--标签通常用于链接到样式表:  外部引用 - 使用外部 CSS 文件 当样式需要被应用到很多页面的时候-->
  <!--  <base href="http://www.runoob.com/images/" target="_blank">     -->               <!--使用 <base> 定义页面中所有链接默认的链接目标地址。-->
</head>
<body>                         <!--包含了可见的页面内容 <body>区域才会在浏览器中显示。-->
<!--
浏览器会自动地在标题的前后添加空行。
搜索引擎使用标题为您的网页的结构和内容编制索引。
-->
<h1>这是一个h1标题</h1>
<h2>这是一个h2标题</h2>
<h3>这是一个h3标题</h3>
<h4>这是一个h4标题</h4>
<h5>这是一个h5标题</h5>
<h6>这是一个h6标题</h6>

<!--水平线 标签在 HTML 页面中创建水平线。-->
<hr>

<!--浏览器会自动地在段落的前后添加空行。（</p> 是块级元素）
当显示页面时，浏览器会移除源代码中多余的空格和空行。
所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
-->
<p>HTML 段落HTML 段<br>落HTML 段<br />落HTML             段落HTML 段落HTML 段落HTML 段落HTML 段落HTML 段落</p>
<!--就是没有关闭标签的空元素（<br> 标签定义换行）。
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签：-->
<br>

<!--超文本链接。
href 属性：指定链接的地址。推荐小写的属性/属性值。
target 属性：target="_top"跳出框架
 请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.runoob.com/html"，就会向服务器产生两次 HTTP 请求。
 这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.runoob.com/html/"
 -->
<a href="http://www.runoob.com" target="_blank" style="text-decoration:none;">链接</a> <!--内联样式- 在HTML元素中使用"style" 属性 当特殊的样式需要应用到个别元素时，就可以使用内联样式。-->

<!--图像的名称和尺寸是以属性的形式提供的。
src 指 "source"。源属性的值是图像的 URL 地址。
alt 属性用来为图像定义一串预备的可替换的文本。
height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。属性值默认单位为像素
-->
<img src="1.png" width="258" height="39" alt="Big Boat" />
<p>创建图片链接:
    <a href="http://www.runoob.com/html/html-tutorial.html">
        <img  border="10" src="1.png" alt="HTML 教程" width="32" height="32"></a></p>
<!--图像地图
map  定义图像地图
 area	定义图像地图中的可点击区域-->
<img src="1.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
    <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
    <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
    <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>


HTML 文本格式化<br>
<!--<b>("bold") 与 <i>("italic")  粗体 or 斜体
通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。
<b> 与<i> 定义粗体或斜体文本。
<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。
现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。
-->
<b>加粗文本</b><br>              <!-- 	定义粗体文本-->
<strong>加粗文本</strong><br>   <!--定义加重语气-->
<i>斜体文本</i><br>                 <!--定义斜体字-->
<em>斜体文本</em><br>               	<!--定义着重文字-->
这是 <sub> 下标</sub> 和 <sup> 上标</sup>
<big>这个文本字体放大</big>
<small>这个文本是缩小的</small>    	<!--定义小号字-->
<pre>                           	<!--定义预格式文本-->
    预格式文本
此例演示如何使用 pre 标签
对空行和    空格
进行控制
</pre>

<code>计算机输出</code><br />   <!--定义计算机代码-->
<kbd>键盘输入</kbd><br />     <!--定义键盘码-->
<tt>打字机文本</tt><br />
<samp>计算机代码样本</samp><br />     <!--定义计算机代码样本-->
<var>计算机变量</var><br />          <!--定义变量-->
<b>注释：</b>这些标签常用于显示计算机/编程代码。
地址
<address>                           <!--定义地址-->
    Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
    Visit us at:<br>
    Example.com<br>
    Box 564, Disneyland<br>
    USA
</address>
文字方向
<p>该段落文字从左到右显示。</p>
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>   <!--定义文字方向-->

块引用
<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>   <!--定义短的引用语-->
We hope they succeed.</p>
删除字效果和插入字效果
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>  <!--ins定义插入字   del定义删除字-->

<!--属性
class 	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id  	定义元素的唯一id
style  规定元素的行内样式（inline style）
title  描述了元素的额外信息 (作为工具条使用)
-->
<div class="" id="" style="" title=""></div>

<!--HTML 表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。
字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格的表头使用 <th> 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本：
表格标题  caption
定义表格列的组  <colgroup>
定义用于表格列的属性 <col>
定义表格的页眉   <thead>
 	定义表格的主体 <tbody>
 	定义表格的页脚<tfoot>

边框属性  border
单元格边距(Cell padding) cellpadding
单元格间距  cellspacing
-->
<table border="1" cellpadding="10" cellspacing="1">
    <caption>Monthly savings</caption>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

<h4>水平标题:</h4>
<table border="1">
    <tr>
        <th>Name</th>
        <th>Telephone</th>
        <th>Telephone</th>
    </tr>
    <tr>
        <td>Bill Gates</td>
        <td>555 77 854</td>
        <td>555 77 855</td>
    </tr>
</table>

<h4>垂直标题:</h4>
<table border="1">
    <tr>
        <th>First Name:</th>
        <td>Bill Gates</td>
    </tr>
    <tr>
        <th>Telephone:</th>
        <td>555 77 854</td>
    </tr>
    <tr>
        <th>Telephone:</th>
        <td>555 77 855</td>
    </tr>
</table>

<h4>单元格跨两格:</h4>
<table border="1">
    <tr>
        <th>Name</th>
        <th colspan="2">Telephone</th>
    </tr>
    <tr>
        <td>Bill Gates</td>
        <td>555 77 854</td>
        <td>555 77 855</td>
    </tr>
</table>

<h4>单元格跨两列:</h4>
<table border="1">
    <tr>
        <th>First Name:</th>
        <td>Bill Gates</td>
    </tr>
    <tr>
        <th rowspan="2">Telephone:</th>
        <td>555 77 854</td>
    </tr>
    <tr>
        <td>555 77 855</td>
    </tr>
</table>

<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
        <td align="center" class="biaoti" height="60">受理员业务统计表</td>
    </tr>
    <tr>
        <td align="right" height="25">2017-01-02---2017-05-02</td>
    </tr>
</table>

<table width="100%" border="0" cellspacing="1" cellpadding="4" bgcolor="#cccccc" class="tabtop13" align="center">
    <tr>
        <td colspan="2" class="btbg font-center titfont" rowspan="2">受理员</td>
        <td width="10%" class="btbg font-center titfont" rowspan="2">受理数</td>
        <td width="10%" class="btbg font-center titfont" rowspan="2">自办数</td>
        <td width="10%" class="btbg font-center titfont" rowspan="2">直接解答</td>
        <td colspan="2" class="btbg font-center titfont">拟办意见</td>
        <td colspan="2" class="btbg font-center titfont">返回修改</td>
        <td colspan="3" class="btbg font-center titfont">工单类型</td>
    </tr>
    <tr>
        <td width="8%" class="btbg font-center">同意</td>
        <td width="8%" class="btbg font-center">比例</td>
        <td width="8%" class="btbg font-center">数量</td>
        <td width="8%" class="btbg font-center">比例</td>
        <td width="8%" class="btbg font-center">建议件</td>
        <td width="8%" class="btbg font-center">诉求件</td>
        <td width="8%" class="btbg font-center">咨询件</td>
    </tr>
    <tr>
        <td width="7%" rowspan="8" class="btbg1 font-center">受理处</td>
        <td width="7%"  class="btbg2">王艳</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td class="btbg2">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td class="btbg2">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td class="btbg2">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td class="btbg2">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td class="btbg2">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td class="btbg2">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td class="btbg2 font-center">总计</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
    </tr>
    <tr>
        <td width="7%" rowspan="8" class="btbg1 font-center">话务组</td>
        <td width="7%"  class="btbg2">王艳</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td class="btbg2">王艳</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td class="btbg2">王艳</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td class="btbg2">王艳</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td class="btbg2">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td class="btbg2">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td class="btbg2">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td class="btbg2 font-center">总计</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
    </tr>
</table>
<h4 style="text-align:center">课程表</h4>
<table border="1" cellpadding="10" width="100%">
    <tr>
        <th colspan="2">时间\日期</th>
        <th>一</th>
        <th>二</th>
        <th>三</th>
        <th>四</th>
        <th>五</th>
    </tr>

    <tr>
        <th rowspan="2">上午</th>
        <th>9:30-10:15</th>
        <th>语文</th>
        <th>语文</th>
        <th>语文</th>
        <th>语文</th>
        <th>语文</th>
    </tr>

    <tr>
        <th>10:25-11:10</th>
        <th>语文</th>
        <th>语文</th>
        <th>语文</th>
        <th>语文</th>
        <th>语文</th>
    </tr>

    <tr>
        <th colspan="7"></th>
    </tr>

    <tr>
        <th rowspan="2">下午</th>
        <th>14:30-15:15</th>
        <th>语文</th>
        <th>语文</th>
        <th>语文</th>
        <th>语文</th>
        <th>语文</th>
    </tr>

    <tr>
        <th>15:25-16:10</th>
        <th>语文</th>
        <th>语文</th>
        <th>语文</th>
        <th>语文</th>
        <th>语文</th>
    </tr>
</table>
<table>
    <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td>11</td>
        <td>22</td>
        <td>33</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td>111</td>
        <td>222</td>
        <td>333</td>
    </tr>
    </tfoot>
</table>

<!--无序ul
有序列表始于 <ol>
自定义列表是项目及其注释的组合,以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<ol> 	定义有序列表
<ul> 	定义无序列表
<li> 	定义列表项
<dl> 	定义列表
<dt> 	自定义列表项目
<dd> 	定义自定列表项的描述
 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
-->
列表:有序、无序和定义列表
<h4>无序列表:</h4>
<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>
<ol>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ol>

<ol start="50">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ol>
<h4>编号列表：</h4>
<ol>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
</ol>

<h4>大写字母列表：</h4>
<ol type="A">
    <li>Apples</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
</ol>

<h4>小写字母列表：</h4>
<ol type="a">
    <li>Apples</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
</ol>

<h4>罗马数字列表：</h4>
<ol type="I">
    <li>Apples</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
</ol>

<h4>小写罗马数字列表：</h4>
<ol type="i">
    <li>Apples</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
</ol>
<dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
</dl>

<p><b>注意：</b> 在 HTML 4中 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表如下：</p>

<h4>圆点列表：</h4>
<ul style="list-style-type:disc">
    <li>Apples</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
</ul>

<h4>圆圈列表：</h4>
<ul style="list-style-type:circle">
    <li>Apples</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
</ul>

<h4>正方形列表：</h4>
<ul style="list-style-type:square">
    <li>Apples</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
</ul>

<h4>嵌套列表​：</h4>
<ul>
    <li>Coffee</li>
    <li>Tea
        <ul>
            <li>Black tea</li>
            <li>Green tea</li>
        </ul>
    </li>
    <li>Milk</li>
</ul>
<h4>嵌套列表：</h4>
<ul>
    <li>Coffee</li>
    <li>Tea
        <ul>
            <li>Black tea</li>
            <li>Green tea
                <ul>
                    <li>China</li>
                    <li>Africa</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Milk</li>
</ul>


























</body>
</html>